<template>
	<div class="container-fluid">
		<div class="panel">
			<div class="panel-heading">
				<h3 class="panel-title">巡店数据报表</h3>
			</div>
			<el-row>
					<el-col :span="24">
						<collapse-view content="高级搜索">
							<el-form :model="queryParams" label-width="80px" label-position="right" :inline="true" ref="searchForm">
								<el-form-item label="组织名称">
									<el-input v-model="queryParams.shop_name" placeholder="输入组织名称查询" clearable></el-input>
								</el-form-item>
								<el-form-item label="组织编码">
									<el-input v-model="queryParams.shop_code" placeholder="输入组织编码查询" clearable></el-input>
								</el-form-item>
								<el-form-item label="提交人">
									<el-input v-model="queryParams.user_name" placeholder="输入提交人查询" clearable></el-input>
								</el-form-item>
								<el-form-item label="提交时间">
									<el-date-picker
								      v-model="queryParams.created_at"
								      type="datetimerange"
								      value-format="yyyy-MM-dd HH:mm:ss"
								      range-separator="至"
								      start-placeholder="开始日期"
								      end-placeholder="结束日期">
								    </el-date-picker>
								</el-form-item>
								<el-form-item>
									<el-button @click="fetchXunDianShuJus">搜索</el-button>
									<el-button @click="clearSearchForm">清除</el-button>
								</el-form-item>
							</el-form>
						</collapse-view>
					</el-col>
				</el-row>
			<div class="panel-body">
				<el-table :data="collections.data" style="width: 100%" v-loading="loading">
					<el-table-column label="组织名称" width="180" prop="shop_name"></el-table-column>
					<el-table-column label="组织编码" width="180" prop="shop_code"></el-table-column>
					<el-table-column label="提交人" prop="user_name"></el-table-column>
					<el-table-column label="提交时间" prop="created_at"></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button plain size="mini" @click="mingxi(scope.row.id)" icon="el-icon-tickets"></el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 查看明细 -->
				<el-dialog title="查看明细" :visible.sync="dialogVisible">
				  <el-table :data="mingXi.data" v-loading="loadingMinXi">
					<el-table-column prop="task_name" label="任务名称"></el-table-column>
					<el-table-column prop="task_type" label="类型"></el-table-column>
					<el-table-column prop="value" label="值"></el-table-column>
					<el-table-column label="照片">
					<template slot-scope="scope">
					<span style="cursor: pointer" v-if="scope.row.path" @click="showImage(scope.row, scope.$index)">
					<i class="glyphicon glyphicon-picture"></i>
					</span>
					</template>
					</el-table-column>
				  </el-table>
				</el-dialog>
				<!-- 明细图片展示 -->
				<el-dialog title="图片展示" :visible.sync="ImagedialogVisible"  :before-close="handleClose">
	              <el-carousel v-if="ImagedialogVisible" trigger="click" :autoplay="false" height="500px" indicator-position="none" :initial-index="currentRawId" @change="changeImage">
	                <el-carousel-item v-if="item.path" v-for="(item, index) in images" :key="index">
	                  <div class="details">
	                    <h4 v-html="item.task_name"></h4>
	                  </div>
	                  <img :src="index === currentRawId ? item.path.replace('public', 'storage') : ''">
	                </el-carousel-item>
	              </el-carousel>
	            </el-dialog>
			</div>
			<div class="panel-footer text-right">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
											 :current-page="queryParams.page"
											 :page-sizes="[10, 20, 50, 100]"
											 :page-size="queryParams.paginate"
											 layout="total, sizes, prev, pager, next, jumper"
											 :total="collections.total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import api from '../apis'
	import { mapState, mapActions } from 'vuex'
	import Vue from 'vue';

	export default {
		name: "xun-dian-shu-ju",
		data () {
			return {
				// 弹出默认隐藏
				dialogVisible: false,

				// 表格加载动画
				loading: false,

				// 弹出加载动画
				loadingMinXi: false,

				// 巡店数据
				collections: {
					data: [],
					total: 0,
				},

				// 巡店数据明细
				mingXi:{
					data:[],
					total:0,
				},

				// 巡店分页查询信息
				queryParams: {
					page: 1,
					paginate: 10,
					shop_name: '',
					shop_code: '',
					created_at: '',
					user_name: '',
				},

				// 明细分页查询信息
				minXiParams: {
					id: 0,
				},

				// 类型
				leiXing: {
					select: "选择器",
					number: "数字",
					text: "文本",
					time: "日期",
				},

				// 图片集合
				images: [],

				// 图片弹出
				ImagedialogVisible: false,

				//
				currentRawId: 0,
			}
		},
		methods: {
			/**
			 * 获取组织数据集合
			 */
			fetchXunDians () {
				this.loading = true;
				api.XunDianShuJu.fetch(this.queryParams).then(response => {
					this.collections = response.data;
					this.loading = false;
				})
			},
			/**
			 * 获取组织数据明细
			 */
			fetchByIDXunDian () {
				this.loadingMinXi = true;
				api.XunDianShuJu.fetchByID(this.minXiParams).then(response => {
					this.mingXi.data = response.data;
					this.loadingMinXi = false;
				})
			},
			/**
			 * 查看明细
			 */
			mingxi (id) {
				this.minXiParams.id = id;
				this.dialogVisible = true;
				this.fetchByIDXunDian();
			},
			//过滤不含图片的数据
			checkImage () {
			  let images = [];
			  this.mingXi.data.forEach(item => {
			      if (item.path) {
			          images.push(item);
			      }
			  });
			  this.images = images;
			},
			//查看单张图片
			showImage (row, index) {
				this.checkImage();
				this.ImagedialogVisible = true;
				//根据选择的行ID 获取 该数据在images里的index
				for (let i = 0; i < this.images.length; i ++) {
				  if (this.images[i].id === row.id) {
				      this.currentRawId = i;
				  }
				}
			},
			//切换图片
			changeImage (index) {
			  // if (index !== 0) {
			      setTimeout(() => {
			          this.currentRawId = index ;
			      }, 500);
			  // }
			},
			//关闭图片预览窗口
			handleClose () {
			  this.ImagedialogVisible = false;
			},
			/**
			 * 当改变分页大小时重新获取组织数据
			 */
			handleSizeChange (size) {
				this.queryParams.paginate = size;
				this.fetchXunDians();
			},
			/**
			 * 当改变页码时重新获取组织数据
			 */
			handleCurrentChange (index) {
				this.queryParams.page = index;
				this.fetchXunDians();
			},
			/**
			 * 搜索查询
			 */
			fetchXunDianShuJus () {
				// console.log(this.queryParams)
				this.fetchXunDians();
			},
			/**
			 * 清空搜索表单
			 */
			clearSearchForm () {
				this.queryParams.shop_name = '';
				this.queryParams.shop_code = '';
				this.queryParams.created_at = '';
				this.queryParams.user_name = '';
			},
		},
		mounted () {
			this.fetchXunDians();
		}
	}
</script>

<style>

</style>
